<script setup lang="ts">
import * as THREE from "three";

//导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

import {GUI} from "three/examples/jsm/libs/lil-gui.module.min.js"
//创建场景
const scene = new THREE.Scene();
scene.background=new THREE.Color("#8c8c8c")
//创建相机
const camera = new THREE.PerspectiveCamera(
  45, //视角
  window.innerWidth / window.innerHeight, //相机宽高比
  0.1, //近平面
  1000
); //原平面

//创建渲染器
const renderer = new THREE.WebGLRenderer();

//创建几何体
const geometry = new THREE.BoxGeometry(2, 2, 2);
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: "#40a9ff" });
const parentMaterial = new THREE.MeshBasicMaterial({ color: "#ff85c0" });

let parentCube = new THREE.Mesh(geometry, parentMaterial);
//父元素里边添加子元素
//创建网格
const cube = new THREE.Mesh(geometry, material);
parentCube.add(cube);
parentCube.position.set(-3, 0, 0);
cube.position.set(3, 0, 0);

//位移缩放
//设置立方体的放大
// cube.scale.set(2,2,2)
// parentCube.scale.set(2,2,2)

//旋转
// cube.rotation.set(Math.PI / 4, 0, 0);

// parentCube.rotation.set(Math.PI / 4, 0, 0);
// cube.position.set(2,2,2)
//添加到场景
// scene.add(cube)
scene.add(parentCube);

//设置相机位置
camera.position.z = 10;
camera.position.y = 10;
camera.position.x = 10;
//相机看向哪里
camera.lookAt(0, 0, 0);

//添加世界坐标辅助器
const axesHelper = new THREE.AxesHelper(999);
scene.add(axesHelper);
//添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
//设置带阻尼
// controls.enableDamping=true

//设置阻尼系数
// controls.dampingFactor=0.05
//设置旋转速度
// controls.autoRotateSpeed=0.5
//设置旋转速度
// controls.autoRotate=true
//渲染函数
function animate() {
  controls.update();
  // 下一针继续调用animate
  requestAnimationFrame(animate);
  // cube.rotation.x+=0.01
  // cube.rotation.y+=0.01
  renderer.render(scene, camera);
}
//渲染



// document.body.appendChild(renderer.domElement)


let eventObj={
  Fullscreenchange:function(){
    document.body.requestFullscreen()
  },
  Exitscreenchange:function(){
    document.exitFullscreen()
  }
}
const gui =new GUI()
// gui.name('控制')
//控制全屏

let screenfolder=gui.addFolder('全屏')
screenfolder.add(eventObj,'Fullscreenchange').name('全屏')
screenfolder.add(eventObj,'Exitscreenchange').name('退出全屏')
//控制立方体位置
let folder=gui.addFolder('立方体位置')
folder.add(cube.position,'x',-5,5).name('x轴').onFinishChange((val:any)=>{
  console.log(val)
})
folder.add(cube.position,'y',-5,5).name('y轴')
folder.add(cube.position,'z',-5,5).name('z轴')
 gui.add(parentMaterial,"wireframe")
let cubeColor={
  color:"#00ff00"
}
gui.addColor(cubeColor,"color").onChange((val:any)=>{
  cube.material.color.set(val)
})



setTimeout(() => {
  const dom = document.getElementById("test01");
  camera.aspect = dom!.offsetWidth / dom!.offsetHeight;
  //监听屏幕变化
  window.addEventListener("resize", () => {
    //重置画布宽高
    renderer.setSize(dom!.offsetWidth, dom!.offsetHeight);
    //重置相机视窗宽高
    camera.aspect = dom!.offsetWidth / dom!.offsetHeight;
    //更新相机投影矩阵
    camera.updateProjectionMatrix();
  });
  renderer.setSize(dom!.offsetWidth, dom!.offsetHeight); //渲染器画布大小
  dom!.appendChild(renderer.domElement);
  renderer.render(scene, camera);

  animate();
}, 0);
</script>

<template>
  <div id="test01">

  </div>

 
</template>

<style scoped>
#test01 {
  height: 100%;
  width: 100%;
  color: white;
  background-color: rgb(255, 255, 255);
}
</style>
